<template>
  <div class="postDetails">
    <el-container class="postDetails-box">
      <div class="postDetails-header">发文详情</div>
      <!-- <div>{{ sendItem }}</div> -->
      <div class="postDetails-cont">
        <!-- 按钮 -->
        <div class="postDetails-btnAll">
          <div class="postDetails-btn">
            <el-button type="primary" @click="goBack">返回</el-button>
            <el-button type="danger">删除</el-button>
          </div>
        </div>

        <el-container class="published-height" style="max-height: 790px;height: 790px;overflow: hidden;">
          <el-main style="max-height: 500px;">
            <div style="font-size: 25px;font-weight: 700;">标题：{{ sendItem.originalName }}</div>
            <div>发件人：{{ sendItem.createUser }}</div>
            <div>收件人：{{ sendItem.createUser }}</div>
            <div>时间：{{ formatDate(sendItem.updateTime) }}</div>
            <div style="padding-left: 100px;">
              {{ sendItem.createUser }},您好:
              <div>内容</div>
              <span style="padding-left: 20px;">详见附件</span>
            </div>
          </el-main>
          <el-footer>
            <div class="checkbox-content">
              <!-- <i class="el-icon-document"></i> 你可以根据需求更换图标 -->
              <img src="@/assets/icon/link.svg" alt="" @click.prevent="openPost(sendItem)">
              <img src="@/assets/icon/infoall.svg" alt="">
              <span class="file-size">{{ sendItem.originalName }}</span>
              <span class="file-size">{{ formatFileSize(sendItem.fileSize) }}</span>
              <span class="file-size">{{ formatDate(sendItem.updateTime) }}</span>
            </div>
          </el-footer>


        </el-container>


      </div>
    </el-container>

  </div>
</template>

<script>
export default {
  name: 'postDetailsView',
  data () {
    return {
     
    }
  },
  computed: {
    sendItem () {
      return this.$store.getters['getSendItem'];

    }
  },
  methods: {
    goBack() {
      this.$router.go(-1); // 使用 Vue Router 返回上一页
    },
    // 格式化文件大小（这里依然是文件大小格式化）
    formatFileSize (size) {
      if (size < 1024) return `${size} B`;
      else if (size < 1048576) return `${(size / 1024).toFixed(2)} KB`;
      else if (size < 1073741824) return `${(size / 1048576).toFixed(2)} MB`;
      else return `${(size / 1073741824).toFixed(2)} GB`;
    },
    // 格式化时间
    formatDate (date) {
      return new Date(date).toLocaleString();
    },
    // 处理全选框的变化
    toggleAllSend (isSelected) {
      if (isSelected) {
        // 全选
        this.selectedPublished = this.publishedList.map(item => item.createUser);
      } else {
        // 取消全选
        this.selectedPublished = [];
      }
    }
  },
}
</script>

<style lang="scss" scoped>
::v-deep.el-button {
  padding: 8px 30px !important;
}

::v-deep .el-container {
  overflow: hidden;
  /* 防止父容器显示默认滚动条 */
}


.checkbox-content {
  display: flex;
  align-items: center;
  text-align: center;

  img {
    width: 25px;
    height: 25px;
    margin: 0 100px;
  }


  .file-size {
    margin-left: 10px;
    width: 400px;
    color: #888;
  }



  .el-icon-document {
    font-size: 18px;
    color: #1890ff;
  }
}

.postDetails {
  width: 100%;

  .postDetails-box {
    display: flex;
    flex-direction: column;

    .postDetails-header {
      padding: 3px;
      height: 60px;
      line-height: 60px;
      font-size: 20px;
      font-weight: 600;
      text-align: center;
      background-color: white;
      border-bottom: 1px #ddd solid;
    }
  }

  .postDetails-cont {
    display: flex;
    flex-direction: column;
    overflow: hidden;

    .postDetails-btnAll {
      display: flex;
      padding: 20px 0;
      align-items: center;
      border-bottom: 1px #ddd solid;

      .postDetails-btn {
        margin-left: 15px;
      }


    }
  }

  .published-height div {
    padding: 20px 0 20px 50px;
  }

  .published-height div:first-child {
    padding-left: 20px;
  }
}
</style>